import { Container, Grid, Typography } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import "prismjs/themes/prism-tomorrow.css"
import * as  React from "react"
import Layout from "../components/layout"
import Categories from "./categories"
import TableOfContents from "./table-of-contents"
import "./template-docs-markdown.scss"

export const query = graphql`
  query ($slug: String!) {
    mdx(fields: {slug: {eq: $slug}}) {
      body
      fields {
        slug
      }
      frontmatter {
        title
      }
      tableOfContents
    }
  }
`

const useStyles = makeStyles(() => ({
  mainBody: {
    padding: "20px",
  },
  mdxTitle: {
    fontSize: "2rem",
    fontWeight: "bold",
  },

}))

interface MarkdownDocsTemplateProps {
  data: any
}

export default function MarkdownDocsTemplate({ data }: MarkdownDocsTemplateProps) {
  const classes = useStyles()
  const page = data.mdx
  const { fields } = page
  const { slug } = fields
  const { tableOfContents } = page
  return (
    <Layout>
      <div className={classes.mainBody}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={2}>
            <Categories/>
          </Grid>
          <Grid item xs={12} sm={10}>
            <Container>
              <Typography variant="h1" className={classes.mdxTitle} gutterBottom children={page.frontmatter.title}/>
              <Grid container spacing={2}>
                <Grid item sm={7}>
                  <div className="markdown-body">
                    <MDXRenderer slug={page.fields.slug}>{page.body}</MDXRenderer>
                  </div>
                </Grid>
                <Grid item sm={3}>
                  {tableOfContents && <TableOfContents location={slug} items={tableOfContents.items}/>}
                </Grid>
              </Grid>
            </Container>
          </Grid>
        </Grid>
      </div>
    </Layout>
  )
}
